<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/lib/jquery-3.3.1.min.js"></script>
    <script src="./js/lib/jquery-ui.min.js"></script>
    <script src="./js/lib/jquery.fullpage.min.js"></script>
    <script>
       var res = [
            'Base','Bar','Bar_v','Point','Polyline',
            'Radar','Pie','Ring'
            ];
        var html = [];
        for(s in res){
            html.push('<script type="text/javascript" src="js/H5Component'+res[s]+'.js"><\/script>');
            html.push('<link rel="stylesheet" type="text/css" href="css/H5Component'+res[s]+'.css">');

        }
        document.write( html.join('') );

    </script>
    <style>
body{
            margin: 0;
            padding: 0;
        }

        .h5_page{
            background-image: url(img/page_bg.png);
        }
        .h5_page_face{
            background-image: url(img/face_bg.png);
        }
        .h5_component_name_slogan{
            -webkit-animation:rock 2s infinite 2s;
        }
        @-webkit-keyframes rock{
            0%{ transform:rotate(0deg)}
            5%{ transform:rotate(3deg)}
            10%{ transform:rotate(-4deg)}
            15%{ transform:rotate(3deg)}
            20%{ transform:rotate(-2deg)}
            25%{ transform:rotate(1deg)}
            30%{ transform:rotate(-1deg)}
            70%{ transform:rotate(0deg)}
            100%{ transform:rotate(0deg)}
        }

        .h5_component_name_caption{
            background-image: url(img/page_caption_bg.png);
            width: 283px;
            height: 160px;
            text-align: center;
            line-height: 140px;
            font-size: 20px;
            color: #fff;
        }
        .h5_component_name_back{
            top: 30px;
            -webkit-animation:back 2s infinite 2s;
        }

        @-webkit-keyframes back{
            50%{ top: 20px; }
        }
    </style>
    <script>
        $(function () {
            var h5 = new H5();
            h5.addPage('face')
                .addComponent('topic',{
                    center:true,
                    width:395,
                    height:130,
                    bg:'img/face_logo.png',
                    css:{
                        opacity:0
                    },
                    animateIn:{top:100,opacity:1},
                    animateOut:{top:0,opacity:0}
                })
                .addComponent('slogan',{
                    center: true,
                    width: 365,
                    height: 99,
                    bg: 'img/face_slogan.png',
                    css: { opacity: 0, top: 180 },
                    animateIn:{left:'50%',opacity:1},
                    animateOut:{left:'0%',opacity:0},
                    delay:500,
                })
                .addComponent('face_img_left',{
                    width: 370,
                    height: 493,
                    bg:'img/face_img_left.png',
                    css: { opacity: 0, left: -50, bottom: -50 },
                    animateIn: { left: 0, bottom: 0, opacity: 1 },
                    animateOut: { left: -50, bottom: -50, opacity: 0 },
                    delay:1500
                })
                .addComponent('face_img_right',{
                    width: 276,
                    height: 449,
                    bg:'img/face_img_right.png',
                    css: { opacity: 0, right: -50, bottom: -50 },
                    animateIn: { right: 0, bottom: 0, opacity: 1 },
                    animateOut: { right: -50, bottom: -50, opacity: 0 },
                    delay:1000
                })
                .addPage('desc')
                .addComponent('caption', {
                    text: '核心理念',
                })
                .addComponent('text',{
                    width:500,
                    height:30,
                    center:true,
                    text:'IT教育网=只学有用的',
                    css:{
                        opacity:0,textAlign:'center',color:'red',
                        fontSize:'26px'
                    },
                    animateIn:{opacity:1,top:120},
                    animateOut:{opacity:0,top:240}
                })
                .addComponent('description',{
                    center:true,
                    width:481,
                    height:295,
                    bg:'img/description_bg.gif',
                    css:{
                        opacity: 0,
                        padding: '15px 10px 10px 10px',
                        color: '#fff',
                        fontSize: '15px',
                        lineHeight: '18px',
                        textAlign:'justify',
                        top:240
                    },
                    text:'2013年，IT教育网的诞生引领中国IT职业从教育进入新时代；高质量实战课程、全新教学模式、实时互动学习，以领先优势打造行业品牌；迄今为止，IT教育网已成为中国规模最大、互动性最高的IT技能学习平台。',
                    animateIn:{
                        opacity:1,
                        top:190
                    },
                    animateOut:{
                        opacity:0,top:240
                    },
                    delay:1000
                })
                .addComponent('people',{
                    center: true,
                    width: 515,
                    height: 305,
                    bg:'img/p1_people.png',
                    css:{
                        opacity: 0,
                        bottom: 0,
                    },
                    animateIn:{
                        opacity:1,
                        bottom:40
                    },
                    animateOut:{
                        opacity:0,bottom:0 
                        
                    },
                    delay:500
                })
                .loader(2);
        })
    </script>
    <script src="./js/H5.js"></script>
    <link rel="stylesheet" href="./css/H5.css">
</head>

<body>

</body>

</html>